<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- <view class="personnel" :style="{'height':tarbarHeight+'px'}">
			<image @click="backOnClick" src="../../../static/left_arrow.png" class="backImg" mode=""></image>
			<text class="title">{{personnelInfo}}</text>
		</view> -->

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<view class="content">

			<view class="contentDepartmen">

				<text class="contentDepartmenText">上级部门</text>
				<text class="contentDepartmenText">无</text>
			</view>
			<view class="lineBg1"></view>
			<view class="contentDepartmen">
				<text class="contentDepartmenText">编号</text>
				<input class="contentDepartmenInput" type="text" value="11" />
			</view>
			<view class="lineBg1"></view>
			<view class="contentDepartmen">
				<text class="contentDepartmenText">编号</text>
				<input class="contentDepartmenInput" type="text" value="11" />
			</view>
		</view>





		<view class="loginContent">

			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>



	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	
	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				title: '修改',
				isback: true,

				personnelInfo: '修改',
				tops: 0,
				height: 0,
				tarbarHeight: 0,

				login: '确定'

			}
		},
		methods: {

			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			},

		},
		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})

		}
	}
</script>

<style>
	
	
	.lineBg1 {
		width: 100%;
		height: 1rpx;
		background: #EEEEEE;
	}
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		width: 550rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;

		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.contentDepartmenText {
		text-align: right;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentDepartmenInput {
		width: 120rpx;
		height: 100%;
		text-align: right;
		margin-right: 30rpx;
	}

	.contentDepartmen {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 120rpx;


	}

	.Global {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 750rpx;



	}

	.page {
		height: 100%;
		background: linear-gradient(#45A8FF, #0AE1C6);
	}

	.content {
		width: 690rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;



	}




</style>